<template>
  <div class="index-page">
    <Header />
    
    <!-- 添加悬浮导航 -->
    <nut-fixednav 
      :position="{top:'50%', right: '0px'}" 
      v-model:visible="navVisible" 
      :nav-list="navList" 
      @selected="handleNavSelect"
      style="transform: translateY(-50%); --nutui-fixednav-item-active-color: #9597C3;"
      type="right"
      :overlay="false"
      :class="{'mobile-nav': isMobile}"
    />

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 分类导航和轮播图区域 -->
      <div class="top-section">
        <div class="container">
          <div class="category-menu" v-if="!isMobile">
            <div class="menu-title">
              <el-icon><Menu /></el-icon>
              全部商品分类
            </div>
            <div class="menu-list">
              <div class="menu-item" v-for="(category, index) in categories" :key="index">
                <div class="menu-item-content">
                  <i :class="category.icon"></i>
                  <span>{{ category.name }}</span>
                </div>
                <el-icon><ArrowRight /></el-icon>
                <!-- 子分类卡片 -->
                <div class="submenu-card">
                  <div class="submenu-section" v-for="(section, sIndex) in category.sections" :key="sIndex">
                    <div class="section-title">{{ section.title }}</div>
                    <div class="section-items">
                      <router-link 
                        v-for="(item, iIndex) in section.items" 
                        :key="iIndex"
                        :to="{ path: '/front/product-list', query: { category: item }}"
                        class="section-item"
                      >
                        {{ item }}
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="banner-section">
            <!-- 轮播图 -->
            <el-carousel class="main-banner" :height="carouselHeight" indicator-position="outside">
              <el-carousel-item v-for="item in slideshow" :key="item.id" 
                              :style="item.link ? 'cursor: pointer' : ''"
                              @click="handleLink(item.link)">
                <el-image style="width: 100%; height: 100%" fit="cover"
                          :src="item.mainImg"
                />
              </el-carousel-item>
            </el-carousel>
            
            <!-- 右侧广告位 -->
            <div class="right-ads" v-if="!isMobile">
              <el-image class="ad-image" fit="cover"
                        @click="handleLink(rightAdvertising.link)"
                        :src="rightAdvertising.mainImg"
                        :style="rightAdvertising.link ? 'cursor: pointer' : ''"
              />
              <el-image class="ad-image" fit="cover"
                        @click="handleLink(leftAdvertising.link)"
                        :src="leftAdvertising.mainImg"
                        :style="leftAdvertising.link ? 'cursor: pointer' : ''"
              />
            </div>
            
            <!-- 移动端轮播下方广告区 -->
            <div class="mobile-ads" v-if="isMobile">
              <el-image class="mobile-ad-image" fit="cover"
                        @click="handleLink(rightAdvertising.link)"
                        :src="rightAdvertising.mainImg"
                        :style="rightAdvertising.link ? 'cursor: pointer' : ''"
              />
              <el-image class="mobile-ad-image" fit="cover"
                        @click="handleLink(leftAdvertising.link)"
                        :src="leftAdvertising.mainImg"
                        :style="leftAdvertising.link ? 'cursor: pointer' : ''"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 热销商品区域 -->
      <div class="hot-products section">
        <div class="container">
          <div class="section-header">
            <h2 class="title">热销商品</h2>
            <router-link to="/front/hot-sales" class="more">
              查看更多<el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div class="product-grid">
            <div v-for="item in productSalesVolumeTop" :key="item.id" class="product-item">
              <Product :product="item" class="product-card" />
            </div>
          </div>
        </div>
      </div>

      <!-- 新品上市区域 -->
      <div class="new-products section">
        <div class="container">
          <div class="section-header">
            <h2 class="title">新品上市</h2>
            <router-link to="/front/new-products" class="more">
              查看更多<el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div class="product-grid">
            <div v-for="item in productRecommend" :key="item.id" class="product-item">
              <Product :product="item" />
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部广告位 -->
      <div class="top-ad" v-if="topAdvertising.mainImg">
        <el-image style="width: 100%; height: 100%" fit="cover"
                  @click="handleLink(topAdvertising.link)"
                  :src="topAdvertising.mainImg"
                  :style="topAdvertising.link ? 'cursor: pointer' : ''"
        />
      </div>
    </div>
    
    <!-- 添加页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue"
import { Menu, ArrowRight } from '@element-plus/icons-vue'
import request from "@/utils/http.js"
import Product from "@/components/Product.vue"
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import router from "@/router/index.js"
import { FixedNav } from '@nutui/nutui'

// 响应式判断是否为移动设备
const isMobile = ref(window.innerWidth <= 768)
const screenWidth = ref(window.innerWidth)

const checkMobile = () => {
  screenWidth.value = window.innerWidth
  isMobile.value = window.innerWidth <= 768
}

// 动态计算轮播图高度
const carouselHeight = computed(() => {
  if (screenWidth.value <= 480) return '180px'
  if (screenWidth.value <= 768) return '240px'
  if (screenWidth.value <= 992) return '350px'
  return '480px'
})

onMounted(() => {
  window.addEventListener('resize', checkMobile)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkMobile)
})

// 悬浮导航相关
const navVisible = ref(false)
const navList = reactive([
  {
    id: 1,
    text: '首页',
    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
  },
  {
    id: 2,
    text: '商品列表',
    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
  },
  {
    id: 3,
    text: '购物车',
    icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
  },
  {
    id: 4,
    text: '个人中心',
    icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
  }
])

// 导航选择处理
const handleNavSelect = (item) => {
  switch (item.id) {
    case 1:
      router.push('/')
      break
    case 2:
      router.push('/front/product-list')
      break
    case 3:
      router.push('/front/shoppingCart')
      break
    case 4:
      router.push('/front/personalCenter')
      break
  }
}

// 模拟分类数据
const categories = [
  {
    name: '人生里程碑',
    icon: 'iconfont icon-lichengbei',
    sections: [
      {
        title: '重要时刻',
        items: ['新婚誌喜', '新生降临', '成人礼（18岁）', '毕业典礼', '荣升庆贺', '乔迁之喜', '退休生活']
      }
    ]
  },
  {
    name: '爱恋时刻',
    icon: 'iconfont icon-aiqing',
    sections: [
      {
        title: '浪漫时光',
        items: ['情人节', '七夕节', '告白时刻', '恋爱纪念日', '求婚惊喜', '结婚纪念日', '妻子孕期', '产后关怀']
      }
    ]
  },
  {
    name: '感恩致敬',
    icon: 'iconfont icon-ganen',
    sections: [
      {
        title: '致敬表达',
        items: ['教师节', '母亲节', '父亲节', '医师节', '护士节', '致敬导师', '感谢领导', '感恩长辈', '致敬英雄']
      }
    ]
  },
  {
    name: '节日庆典',
    icon: 'iconfont icon-jieri',
    sections: [
      {
        title: '节日祝福',
        items: ['圣诞节', '元旦新年', '中秋节', '元宵节', '端午节', '婚礼（伴手礼）', '生日派对（伴手礼）']
      }
    ]
  },
  {
    name: '商务礼仪',
    icon: 'iconfont icon-shangwu',
    sections: [
      {
        title: '商务往来',
        items: ['客户答谢', '合作伙伴', '公司周年庆', '项目庆功', '会议礼品', '展会赠品', '国际商务', '离职纪念']
      }
    ]
  },
  {
    name: '友谊长存',
    icon: 'iconfont icon-youyi',
    sections: [
      {
        title: '友情见证',
        items: ['闺蜜生日', '兄弟生日', '毕业各奔东西', '好友升职', '朋友新婚', '挚友乔迁', '误会和解']
      }
    ]
  },
  {
    name: '自我奖赏',
    icon: 'iconfont icon-jiangshang',
    sections: [
      {
        title: '成就庆祝',
        items: ['完成目标', '升职快乐', '学会新技能', '一次难忘旅行', '走出舒适圈', '一个人的仪式感']
      }
    ]
  },
  {
    name: '萌宠生活',
    icon: 'iconfont icon-chongwu',
    sections: [
      {
        title: '宠物时光',
        items: ['宠物生日', '接新宠回家', '宠物绝育康复', '宠主联谊', '宠物比赛获奖']
      }
    ]
  },
  {
    name: '文化社交',
    icon: 'iconfont icon-wenhua',
    sections: [
      {
        title: '文艺生活',
        items: ['观影观剧后', '读完一本好书', '音乐会', '艺术展', '俱乐部活动', '网友面基', '粉丝应援']
      }
    ]
  },
  {
    name: '健康关怀',
    icon: 'iconfont icon-jiankang',
    sections: [
      {
        title: '健康时刻',
        items: ['康复庆祝', '体检通过', '减肥成功', '戒烟成功', '运动达标', '心理健康', '产后恢复', '老年保健']
      }
    ]
  },
  {
    name: '学习成长',
    icon: 'iconfont icon-xuexi',
    sections: [
      {
        title: '求知时光',
        items: ['考试通过', '获得证书', '技能认证', '学术成就', '语言学习', '职业培训', '在线课程', '知识分享']
      }
    ]
  }
    
]

const slideshow = ref([])
const productSalesVolumeTop = ref([])
const productRecommend = ref([])
const topAdvertising = ref({})
const leftAdvertising = ref({})
const rightAdvertising = ref({})

// 获取轮播图数据
function getSlideshowList() {
  request.get("/slideshow/page", {
    params: {pageNum: 1, pageSize: 10}
  }).then(res => {
    slideshow.value = res.data.list
  })
}

// 获取热销商品数据
function getProductSalesVolumeTopList() {
  request.get("/product/salesVolumeTop/12").then(res => {
    productSalesVolumeTop.value = res.data
  })
}

// 获取推荐商品数据
function getProductRecommendList() {
  request.get("/product/recommend/6").then(res => {
    productRecommend.value = res.data
  })
}

// 获取广告位数据
function getAdvertisingList() {
  request.get("/advertising/list").then(res => {
    const adList = res.data
    topAdvertising.value = adList.find(item => item.position === '顶部')
    leftAdvertising.value = adList.find(item => item.position === '轮播图左侧')
    rightAdvertising.value = adList.find(item => item.position === '轮播图右侧')
  })
}

// 处理链接点击
function handleLink(link) {
  if (!link) return
  
  if (link.startsWith('/')) {
    if (link.startsWith('/productList')) {
      router.push('/front/product-list' + link.substring(12))
    } else if (link.startsWith('/productDetails/')) {
      router.push('/front/productDetails' + link.substring(15))
    } else {
      router.push(link)
    }
  } else {
    window.open(link, '_blank')
  }
}

// 初始化数据
getSlideshowList()
getProductSalesVolumeTopList()
getProductRecommendList()
getAdvertisingList()
</script>

<style scoped>
.index-page {
  min-width: auto;
  background: url('@/assets/index_bg.png') no-repeat center top;
  background-size: 100% auto;
}

.main-content {
  padding-bottom: 40px;
  width: 100%;
  max-width: 1190px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 15px; /* 添加内边距，避免内容贴边 */
  box-sizing: border-box;
}

.top-section .container {
  display: flex;
  gap: 20px;
  padding: 0;
  flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

.container {
  width: 100%;
}

.category-menu {
  width: 190px;
  background-color: rgba(255, 255, 255, 0.9);
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 10px;
}

.menu-title {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: #9597C3;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}

.menu-list {
  border: 1px solid #e1251b;
  border-top: none;
  background-color: rgba(255, 255, 255, 0.9);
}

.menu-item {
  position: relative;
  height: 40px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.menu-item:hover {
  background-color: #d9d9d9;
}

.menu-item:hover .menu-item-content {
  color: #e1251b;
  text-decoration: underline;
}

.submenu-card {
  display: none;
  position: absolute;
  left: 190px;
  top: 0;
  min-height: 100%;
  width: 400px;
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  padding: 20px;
  z-index: 10;
}

.menu-item:hover .submenu-card {
  display: block;
}

.submenu-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.section-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section-item {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  transition: all 0.3s;
}

.section-item:hover {
  color: #e1251b;
  text-decoration: underline;
}

.search-area {
  background-color: #e1251b;
  padding: 20px 0;
}

.search-box {
  flex: 1;
  margin: 0 100px;
}

.banner-section {
  flex: 1;
  display: flex;
  gap: 10px;
  margin: 10px 0;
  width: 100%;
  flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

.main-banner {
  flex: 1;
  width: 100%;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
}

.right-ads {
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.ad-image {
  height: 235px;
  width: 100%;
  transition: transform 0.3s;
  border-radius: 4px;
  overflow: hidden;
}

.mobile-ads {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.mobile-ad-image {
  flex: 1;
  height: 120px;
  transition: transform 0.3s;
  border-radius: 4px;
  overflow: hidden;
}

.ad-image:hover, .mobile-ad-image:hover {
  transform: translateY(-2px);
}

.section {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* 在小屏幕上允许换行 */
}

.section-header .title {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.section-header .more {
  color: #999;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.section-header .more:hover {
  color: #e1251b;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 自适应网格 */
  gap: 20px;
  padding: 0 20px;
}

.product-item {
  transition: transform 0.3s;
}

.product-item:hover {
  transform: translateY(-2px);
}

.product-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-ad {
  height: 60px;
  margin-bottom: 20px;
  cursor: pointer;
}

:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #fff;
}

/* 添加悬浮导航样式 */
:deep(.nut-fixednav) {
  width: auto !important;
}

:deep(.nut-fixednav-list) {
  border-radius: 8px;
  padding: 8px !important;
  right: 60px !important;
  left: auto !important;
}

:deep(.nut-fixednav-item) {
  width: 60px !important;
  height: 60px !important;
  margin: 5px 0 !important;
}

:deep(.nut-fixednav-item-icon) {
  width: 30px !important;
  height: 30px !important;
  margin-bottom: 3px;
}

:deep(.nut-fixednav-item-text) {
  font-size: 12px !important;
}

:deep(.nut-fixednav-inactive) {
  right: 0 !important;
  left: auto !important;
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .index-page {
    background-size: 200% auto;
  }

  .main-content {
    padding: 0 10px;
  }

  .banner-section {
    flex-direction: column;
    gap: 5px;
  }

  .mobile-ads {
    padding: 0 5px;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* 平板显示三列 */
    gap: 10px;
    padding: 0 10px;
  }

  .section-header .title {
    font-size: 18px;
  }

  .top-ad {
    height: 40px;
  }

  .mobile-nav {
    z-index: 1000; /* 确保导航在其他元素上面 */
  }

  :deep(.nut-fixednav-item) {
    width: 40px !important;
    height: 40px !important;
  }

  :deep(.nut-fixednav-item-icon) {
    width: 20px !important;
    height: 20px !important;
  }

  :deep(.nut-fixednav-item-text) {
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 手机端显示两列 */
    gap: 8px;
    padding: 0 8px;
  }
  
  .section {
    padding: 15px 0;
  }
  
  .section-header {
    padding: 0 15px;
    margin-bottom: 15px;
  }
  
  .section-header .title {
    font-size: 16px;
  }
  
  .mobile-ad-image {
    height: 100px;
  }
}
</style>
